<template>
	<sw-form-frame v-model="visible" title="库角色" width="840" :type="formType" :loading="btnLoading" :footer="!disabled" @submit="handleSubmitForm()">
		<el-form class="library_role_form" size="medium" ref="form" :model="formData" :rules="formRules" label-width="100px" :disabled="disabled">
			<el-form-item label="角色名称" prop="name">
				<el-input v-model="formData.name"></el-input>
			</el-form-item>
			<el-form-item v-for="(item, index) in libraryButtons" :key="index" :label="item.label">
				<el-checkbox-group v-model="item.checked">
					<el-checkbox v-for="(n, i) in item.children" :key="i" :label="n.id" :disabled="n.isDefault">{{ n.name }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="角色描述" prop="content">
				<el-input type="textarea" v-model="formData.content"></el-input>
			</el-form-item>
		</el-form>
	</sw-form-frame>
</template>

<script>
import lodash from 'lodash';
import formMixins from '@/mixins/formMixins';
import { getLibraryButtonList } from '@/api/platform/tbRoleButton';
import { queryLibraryRole, addedLibraryRole, updateLibraryRole } from '@/api/data/tbNetRole';
export default {
	props: {
		libraryId: { type: String, default: '' },
		disabled: { type: Boolean, default: false }
	},
	mixins: [formMixins],
	data() {
		return {
			formRules: {
				name: [{ required: true, message: '请输入库角色名称', trigger: 'blur' }]
			},
			libraryButtons: []
		};
	},
	computed: {
		detailData() {
			return eval(queryLibraryRole);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedLibraryRole : updateLibraryRole);
		},
		roleButtonType() {
			let dictEnums = this.$store.state.common.dictEnums;
			return dictEnums['DISK_ROLE_BUTTON_TYPE'];
		},
		submitParams() {
			let params = { ...this.formData };
			let initChecked = params.tnbList?.map((n) => n.buttonId) || [];
			let nowCheckeds = lodash.flattenDeep(this.libraryButtons.map((n) => n.checked));
			let addData = nowCheckeds.filter((n) => !initChecked.some((k) => k === n));
			let delData = initChecked.filter((n) => !nowCheckeds.some((k) => k === n));
			params['powerList'] = [...addData, ...delData].map((item) => {
				let operType = '';
				if (addData.some((n) => item === n)) {
					operType = '1';
				} else if (delData.some((n) => item === n)) {
					operType = '2';
				}
				return { id: item, buttonId: item, operType };
			});
			if (this.addOrEdit) {
				params['dirId'] = this.libraryId;
			}
			return params;
		}
	},
	methods: {
		async formatFormParams() {
			let dataArr = [];
			if (!this.addOrEdit) {
				let defList = this.formData.defList;
				let checked = this.formData.tnbList.map((n) => n.buttonId);
				let defLists = defList.map((item) => Object.values(item)[0]);
				dataArr = lodash.flattenDeep(defLists);
				this.formatRoleButton(dataArr, checked);
			} else {
				dataArr = await this.getLibraryButtons();
				this.formatRoleButton(dataArr, []);
			}
		},

		//获取库按钮数据
		async getLibraryButtons() {
			let params = { page: 1, limit: 99999 };
			let result = await getLibraryButtonList(params).then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(result.data || []);
			}
		},

		//格式化库角色详情按钮
		formatRoleButton(arr, checked) {
			this.libraryButtons = this.roleButtonType.map((item) => {
				let typeButtons = arr.filter((n) => item.value === n.type);
				let children = typeButtons.map((n) => ({ ...n, isDefault: n.isSelect === '1' }));
				let defaultChecked = typeButtons.filter((n) => n.isSelect === '1').map((n) => n.id);
				let childCheckeds = lodash.union(defaultChecked, checked).filter((n) => typeButtons.some((k) => k.id === n));
				return { label: item.msg, children, checked: this.addOrEdit ? defaultChecked : childCheckeds };
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.library_role_form::v-deep {
	.el-checkbox-group {
		line-height: 1;
	}
	.el-checkbox {
		padding: 11px 0;
	}
}
</style>
